<template>
  <div>
    <div style="padding-left: 170px; padding-bottom: 15px">固定宽度524，高度150</div>
      <el-form :model="categoryForm" label-width="150px" ref="member">
        <el-form-item label="上传广告图：" label-width="170px" prop="categoryImage">
          <el-col :span="16" class="input-r-txt upload-remove-icon">
            <div class="width-148 height-148 upload-remove-bar">
              <el-upload list-type="picture-card"
                        action="/api/common/uploadFiles"
                        accept="image/jpeg,image/gif,image/png,image/bmp"
                        name="files"
                        :data="token"
                        :show-file-list="false"
                        v-loading="fileLoading"
                        :on-success="handleUploadSuccess"
                        :before-upload="beforeUpload">
                <img v-if="categoryForm.posterUrl" :src="categoryForm.posterUrl" class="width-146 height-146" style="border-radius: 2px;">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
            <div class="close-icon width-36 height-36 flex flex-center cursor-p" @click="closeEls">
              <svg-icon v-if="categoryForm.posterUrl" icon-class="close" class="icon font-16 noraml-hide active" />
            </div>
          </el-col>
        </el-form-item>
        <el-form-item label="跳转链接：" label-width="170px" class="none-mar-b pad-b-10 mar-t--4">
          <div class="mini-sbar-input cursor-p" :class="categoryForm.linkRemark ? '' : 'default-sbar-input'" @click="linkLayer()" style="width: 300px">
            {{ categoryForm.linkRemark ? categoryForm.linkRemark : '请选择链接' }}
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="doCancel">取消</el-button>
        <el-button type="primary" @click="doSubmit">保存</el-button>
      </div>

      <el-dialog title="链接选择器" :visible.sync="linkSetVisible" :close-on-press-escape="true" width="850px" :append-to-body="true">
        <div class="shop-main">
          <div class="link-layer-content flex">
            <div class="link-layer-left">
              <ul>
                <li :class="linkTypeTab == '1' ? 'active' : ''" @click="linkTypeChange('1')">商城链接</li>
                <li :class="linkTypeTab == '3' ? 'active' : ''" @click="linkTypeChange('3')">分类链接</li>
                <li :class="linkTypeTab == '2' ? 'active' : ''" @click="linkTypeChange('2')">商品详情</li>
              </ul>
            </div>
            <div class="link-layer-right flex-item">
              <div v-show="linkTypeTab == '1'" class="link-list">
                <div>
                  <h2 class="flex v-align-c">
                    <label></label>
                    <span>基础链接</span>
                  </h2>
                  <ul>
                    <li class="mar-r-11" @click="setLinkType('1001', '领券中心')"><el-button size="small" plain>领券中心</el-button></li>
                    <li class="mar-r-11" @click="setLinkType('1002', '微信客服')"><el-button size="small" plain>微信客服</el-button></li>
                  </ul>
                </div>
                <div>
                  <h2 class="flex v-align-c">
                    <label></label>
                    <span>直播</span>
                  </h2>
                  <ul>
                    <li class="mar-r-11" @click="setLinkType('1401', '直播列表')"><el-button size="small" plain>直播列表</el-button></li>
                  </ul>
                </div>
                <div>
                  <h2 class="flex v-align-c">
                    <label></label>
                    <span>活动</span>
                  </h2>
                  <ul>
                    <li class="mar-r-11" @click="setLinkType('1501', '限时秒杀')"><el-button size="small" plain>限时秒杀</el-button></li>
                    <li class="mar-r-11" @click="setLinkType('1502', '社区团购')"><el-button size="small" plain>社区团购</el-button></li>
                  </ul>
                </div>
                <div>
                  <h2 class="flex v-align-c">
                    <label></label>
                    <span>自定义页面</span>
                  </h2>
                  <ul>
                    <li v-for="(item, index) in customPageList" :key="index" class="mar-r-11 mar-b-10" @click="setLinkType('1101', item)">
                      <el-button size="small" plain>{{item.pageTitle}}</el-button>
                    </li>
                  </ul>
                </div>
              </div>
              <div v-show="linkTypeTab == '2'">
                <div class="link-main">
                  <div class="link-container-list">
                    <!--顶部搜索 -->
                    <div class="top-operate">
                      <div>
                        <div class="float-l">
                          <el-input @keyup.enter.native="handleSearch(0)" v-model="searchKeyword"
                                    clearable placeholder="请输入商品名称" style="width: 228px" class="mar-r-16"></el-input>
                          <el-button class="group-b-left" type="primary" size="small" @click="handleSearch(0)">查询</el-button>
                          <el-button class="group-b-right" size="small" @click="resetSearch(0)">重置</el-button>
                        </div>
                        <br>
                      </div>
                    </div>
                    <!-- 内容列表 -->
                    <div class="table-container">
                      <el-table ref="multipleTable" :data="goodsList" v-loading="listLoading"
                                element-loading-text="加载中" style="width: 100%" border >
                        <el-table-column label="商品" prop="title">
                          <template slot-scope="scope">
                            <div class="flex v-align-c cursor-p">
                              <label><img :src="scope.row.mainImage" class="user-avatar"></label>
                              <div class="font-14 pad-l-10">
                                <div>{{scope.row.title}}</div>
                                <template v-if="scope.row.categoryName">
                                  <div class="category-style">[{{scope.row.categoryName}}]</div>
                                </template>
                              </div>
                            </div>
                          </template>
                        </el-table-column>
                        <el-table-column align="center" width="100px" label="零售价" prop="sellPrice"></el-table-column>
                        <el-table-column align="center" width="100px" label="库存" prop="stock"></el-table-column>
                        <el-table-column align="center" width="100px" label="操作">
                          <template slot-scope="scope">
                            <el-button type="primary" @click="handleUp(scope.row, 0)">选择</el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                  </div>
                  <!-- 列表分页 -->
                  <div class="pagination-box">
                    <div class="pagination">
                      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                     :current-page="searchListQuery.currentPage"
                                     :page-sizes="[10, 20, 50, 100]" :page-size="searchListQuery.size"
                                     layout="total, sizes, prev, pager, next, jumper"
                                     :total="total">
                      </el-pagination>
                    </div>
                  </div>
                </div>
              </div>
              <div v-show="linkTypeTab == '3'">
                <div class="link-main">
                  <div class="link-container-list">
                    <!--顶部搜索 -->
                    <div class="top-operate">
                      <div>
                        <div class="float-l">
                          <el-input @keyup.enter.native="handleSearch(1)" v-model="searchKeyword"
                                    clearable placeholder="请输入商品分类名称" style="width: 228px" class="mar-r-16"></el-input>
                          <el-button class="group-b-left" type="primary" size="small" @click="handleSearch(1)">查询</el-button>
                          <el-button class="group-b-right" size="small" @click="resetSearch(1)">重置</el-button>
                        </div>
                        <br>
                      </div>
                    </div>
                    <!-- 内容列表 -->
                    <div class="table-container">
                      <el-table ref="categoryList" :data="categoryList" v-loading="listLoading"
                                element-loading-text="加载中" style="width: 100%" border >
                        <el-table-column align="center" label="分类名称" prop="categoryName"></el-table-column>
                        <el-table-column align="center" width="100px" label="商品数" prop="goodsCount"></el-table-column>
                        <el-table-column align="center" width="100px" label="操作">
                          <template slot-scope="scope">
                            <el-button type="primary" @click="handleUp(scope.row, 1)">选择</el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                  </div>
                  <!-- 列表分页 -->
                  <div class="pagination-box">
                    <div class="pagination">
                      <el-pagination background @size-change="handleSizeChangeCategory" @current-change="handleCurrentChangeCategory"
                                     :current-page="searchListQuery.currentPage"
                                     :page-sizes="[10, 20, 50, 100]" :page-size="searchListQuery.size"
                                     layout="total, sizes, prev, pager, next, jumper"
                                     :total="total">
                      </el-pagination>
                    </div>
                  </div>
                </div>
              </div>
            </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { getToken } from '@/utils/auth'
  import { listCustomPage } from '@/api/custom-page/page'
  import { getGoodsList } from '@/api/goods/goods'
  import { pageCategoryWithGoods, savePoster } from '@/api/goods/enterpriseGoodsCategory'

  export default {
    data() {
      return {
        searchListQuery: {
          enterpriseId: this.getEnterpriseId(),
          currentPage: 1,
          size: 10
        },
        // 表单对象
        categoryForm: {},
        listLoading: true,
        fileLoading: false,
        total: null,
        token: null,
        searchKeyword: '',
        // 选择器visible
        linkSetVisible: false,
        // 链接类型tab
        linkTypeTab: '1',
        // 商品集合
        goodsList: [],
        // 分类集合
        categoryList: [],
        // 自定义页面集合
        customPageList: []
      }
    },
    props: {
      showFlag: {
        type: Boolean,
        default() {
          return false
        }
      },
      // 分类对象
      categoryObj: {
        type: Object
      }
    },
    watch: {
      showFlag(val) {
        if (val) {
          this.categoryForm = Object.assign({}, this.categoryObj)
        }
      }
    },
    // 初始化页面
    created() {
      this.token = { accessToken: getToken() }
      this.categoryForm = Object.assign({}, this.categoryObj)
    },
    methods: {
      // 图片移除事件
      closeEls() {
        this.categoryForm.posterUrl = ''
      },
      // 文件上传前校验
      beforeUpload(file) {
        const isJPG = file.type === 'image/jpeg'
        const isGIF = file.type === 'image/gif'
        const isPNG = file.type === 'image/png'
        const isBMP = file.type === 'image/bmp'
        if (!isJPG && !isGIF && !isPNG && !isBMP) {
          this.$message.error('上传图片必须是JPG/GIF/PNG/BMP 格式!')
        }
        this.fileLoading = true
        return (isJPG || isBMP || isGIF || isPNG)
      },
      // 文件上传成功后事件
      handleUploadSuccess(res, index) {
        this.fileLoading = false
        if (res.code === 101) {
          this.categoryForm.posterUrl = res.data[0]
        } else {
          this.$message({ type: 'error', message: res.msg })
        }
      },
      // 链接跳转事件
      linkLayer() {
        listCustomPage({
          enterpriseId: this.getEnterpriseId(),
          appType: 10,
          pageType: 11
        }).then(response => {
          if (response.isError) return
          this.customPageList = response.data
          this.linkSetVisible = true
        })
      },
      // 取消事件
      doCancel() {
        this.$emit('close')
      },
      // 确定事件
      doSubmit() {
        savePoster(this.categoryForm).then(response => {
          if (response.isError) return
          this.$message({ message: '保存成功', type: 'success' })
          this.$emit('close', this.categoryForm.enterpriseCategoryId)
        })
      },
      // 链接类型切换事件
      linkTypeChange(tab) {
        this.linkTypeTab = tab
        if (tab === '2') {
          this.initGoodsList()
        }
        if (tab === '3') {
          this.initCategoryList()
        }
      },
      // 设置链接类型
      setLinkType(linkType, item) {
        this.categoryForm.linkType = linkType
        if (linkType === '1001' || linkType === '1002') {
          this.categoryForm.linkRemark = '基础链接-' + item
          this.categoryForm.linkParams = ''
        }
        if (linkType === '1101') {
          this.categoryForm.linkRemark = '自定义页面-' + item.pageTitle
          this.categoryForm.linkParams = '?pageId=' + item.pageId
        }
        if (linkType === '1401') {
          this.categoryForm.linkRemark = '直播-' + item
          this.categoryForm.linkParams = ''
        }
        if (linkType === '1501') {
          this.categoryForm.linkRemark = '秒杀-' + item
          this.categoryForm.linkParams = ''
        }
        this.linkSetVisible = false
      },
      // 获取商品分类列表
      initCategoryList() {
        this.resetQuery()
        this.searchListQuery['categoryName'] = this.searchKeyword
        this.listLoading = true
        // 搜索状态
        pageCategoryWithGoods(this.searchListQuery).then(response => {
          this.total = response.data.total
          this.categoryList = response.data.records
          this.listLoading = false
        })
      },
      // 获取商品列表
      initGoodsList() {
        this.resetQuery()
        this.searchListQuery['title'] = this.searchKeyword
        this.searchListQuery['goodsStatus'] = 1
        this.listLoading = true
        // 搜索状态
        getGoodsList(this.searchListQuery).then(response => {
          this.total = response.total
          this.goodsList = response.records
          if (!this.isDict) {
            this.dict = response.dict
            this.isDict = true
          }
          this.listLoading = false
        })
      },
      // 查询事件
      handleSearch(type) {
        if (type === 0) {
          this.initGoodsList()
        }
        if (type === 1) {
          this.initCategoryList()
        }
      },
      // 重置事件
      resetSearch(type) {
        this.searchKeyword = ''
        this.handleSearch(type)
      },
      // 重置参数
      resetQuery() {
        this.searchListQuery = {
          enterpriseId: this.getEnterpriseId(),
          currentPage: 1,
          size: 10
        }
      },
      // 选择事件
      handleUp(row, item) {
        if (item === 0) {
          this.categoryForm.linkType = '2001'
          this.categoryForm.linkRemark = '商品详情'
          this.categoryForm.linkParams = '?goodsType=' + row.goodsType + '&goodsId=' + row.goodsId
        }
        if (item === 1) {
          this.categoryForm.linkType = '1004'
          this.categoryForm.linkParams = '/pages/shop/main?categoryType=2&categoryId=' + row.enterpriseCategoryId
          this.categoryForm.linkRemark = '分类链接 - ' + row.categoryName
        }
        this.linkSetVisible = false
      },
      // 更改当前页数
      handleCurrentChange(val) {
        this.searchListQuery.currentPage = val
        this.initGoodsList()
      },
      // 更改当前页面大小
      handleSizeChange(val) {
        this.searchListQuery.size = val
        this.initGoodsList()
      },
      // 更改当前页数
      handleCurrentChangeCategory(val) {
        this.searchListQuery.currentPage = val
        this.initCategoryList()
      },
      // 更改当前页面大小
      handleSizeChangeCategory(val) {
        this.searchListQuery.size = val
        this.initCategoryList()
      }
    }
  }
</script>

<style lang="less" scoped>
  .user-avatar {
    width: 68px;
    height: 68px;
    display: block;
    padding: 1px;
    border: #efefef 1px solid;
  }
  .mini-sbar-input {
    line-height: 30px;
    background: #f5f6fa;
    border: #f5f6fa 1px solid;
    padding: 0 10px;
    width: 40%;
    border-radius: 4px;
    color: #606266;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-word;
  }
</style>
